<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item>
          <el-input
            placeholder="请输入用户名"
            style="width: 200px"
            v-model="keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: -20px; outline: none"
            class="el-btn"
            @click="search"
          >
            <el-icon><Search /></el-icon>
          </el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-button type="primary" icon="Plus" @click="addRole">
        添加角色
      </el-button>
      <el-table border style="margin-top: 20px" :data="roleListData">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="share(row)">
              分配权限
            </el-button>
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              @click="Edit(row)"
            ></el-button>
            <el-popconfirm title="确认删除吗" @confirm="deleteData(row)">
              <template #reference>
                <el-button
                  type="primary"
                  size="small"
                  icon="Delete"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7, 9]"
        :disabled="false"
        :background="true"
        layout=" prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="getRoleList"
        @size-change="getRoleList()"
      />
    </el-card>
    <addCard v-model="drawer" :currentData="currentData" />
    <powerShare v-model="drawer2" :powerInfo="powerArr" ref="childRef" />
  </div>
</template>



<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqDeleteRole, reqGetRoleList } from '../../../api/acl/part'
import type {
  Response,
  RecordArray,
  Record,
} from '../../../api/acl/part/getRoleListType'
import { ElMessage } from 'element-plus'
import addCard from './component/addCard.vue'
import powerShare from './component/powerShare.vue'

//定义权限数据收集
let powerArr = ref([])
//定义分配权限抽屉
let drawer2 = ref<boolean>(false)
//定义当前所在行数据
let currentData = ref<Object>()
//搜索关键字
let keyWord = ref<string>('')
//控制抽屉
let drawer = ref<boolean>(false)
//用于收集角色列表数据
let roleListData = ref<RecordArray>([])
//定义角色总数量
let total = ref<number>(100)
//定义当前页码
let currentPage = ref<number>(1)
//定义每页记录数
let pageSize = ref<number>(5)
// 创建一个 ref 引用子组件实例
const childRef = ref()
//组件挂载，获取角色列表
onMounted(() => {
  //调用
  getRoleList()
})
//获取角色列表回调
async function getRoleList(page = 1) {
  currentPage.value = page
  //发送请求（获取角色列表）
  let result: Response = await reqGetRoleList(
    currentPage.value as number,
    pageSize.value as number,
    keyWord.value as string,
  )
  /*   console.log(result) */
  //响应成功
  if (result.code == 200) {
    //赋值
    roleListData.value = result.data.records
    //赋值总数据量
    total.value = result.data.total
  } else {
    ElMessage({
      type: 'error',
      message: '获取信息失败',
    })
  }
}
//添加角色回调
function addRole() {
  drawer.value = true
}
//搜索回调
function search() {
  getRoleList()
  //清空搜索输入框
  keyWord.value = ''
}
//编辑回调
function Edit(row: Record) {
  drawer.value = true
  currentData.value = row
}
//删除回调
async function deleteData(row: Record) {
  //发送删除请求
  let result = await reqDeleteRole(row.id as number)
  /* console.log(result); */
  if (result.code == 200) {
    /*  console.log(result); */
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    //重新渲染数据
    getRoleList(currentPage.value)
  } else {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
  }
}
//重置数据
function reset() {
  getRoleList()
}
//分配权限回调
async function share(row: Record) {
  //打开抽屉
  drawer2.value = true
  childRef.value.getTree(row)
}
//向外暴露数据，以便子组件访问父组件的数据
defineExpose({ drawer, getRoleList, drawer2 })
</script>


<style scoped lang="scss">
.el-btn {
  background-color: #f5f7fa;
  z-index: 100;
}
.el-btn:focus {
  outline: none;
}
</style>
